<template>
    <div>
        <a class="notice">
            <b class="num" v-if="all>0">{{all>99?'99+':all}}</b>
            <div class="tip-notice-panel">
                <div class="tnp-wrap">
                    <div class="tnp-tab">
                        <a :class="{ 'active': tnpTab == 1 }" @click="chooseByTab(1)">私信</a>
                        <a :class="{ 'active': tnpTab == 2 }" @click="chooseByTab(2)">动态</a>
                    </div>
                    <template v-if="tnpTab == 1">
                        <div class="tnp-panel-con-wrap custom-scroll" @scroll="onScroll">
                            <ul class="tnp-panel-con">
                                <li v-for="(item, index) in list" :key="index"  :class="{'active':item.sendStatus==1}" @click="toPrivate(item,index)">
                                    <a class="tnp-con-lt" v-if="item.sendMember">
                                        <img loading="lazy" class="img-avatar" v-aimgd="{ avatar: item.sendMember.avatar, id: item.sendMember.id, w: 100, name: item.sendMember.userName }" @error="loadError">
                                        <div class="title-basic">
                                            <span class="name">{{ item.sendMember.userName }}</span>
                                            <div class="desc">
                                                <div class="dtxt" v-html="item.content"></div>
                                                <span class="tnp-stime">{{item.intervalTimeStr }}</span>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="tnp-con-lt" v-else>
                                        <img loading="lazy" class="img-avatar" :src="defaultAvatar">
                                        <div class="title-basic">
                                            <span class="name">系统通知</span>
                                            <div class="desc">
                                                <div class="dtxt" v-html="item.content"></div>
                                                <span class="tnp-stime">{{item.intervalTimeStr }}</span>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="tnp-footer">
                            <a class="a-ald-readed" @click="handleReadAll">全部已读</a>
                            <a class="a-view-all" @click="privatemember=null;visible = true">查看所有私信</a>
                        </div>
                    </template>
                    <template v-else>
                        <div class="tnp-panel-con-wrap custom-scroll" @scroll="onScroll">
                            <ul class="tnp-panel-con">
                                <li v-for="(item, index) in list" :key="index" :class="{'active':item.sendStatus==1}" @click="toNoticeCenter(item,index)">
                                    <div class="tnp-con-lt">
                                        <img loading="lazy" class="img-avatar" v-aimgd="{ avatar: item.sendMember.avatar, id: item.sendMember.id, w: 100, name: item.sendMember.userName }">

                                        <div class="right-wrap">
                                            <div class="title-basic">
                                                <span class="name" v-if="item.type=='5'">{{ item.sendName }}&nbsp;&nbsp;点赞了你的作品</span>
                                                <span class="name" v-if="item.type=='6'">{{ item.sendName }}&nbsp;&nbsp;评论了你的作品</span>
                                                <span class="name" v-if="item.type=='2'">{{ item.sendName }}&nbsp;&nbsp;点赞了你的评论</span>
                                                <span class="name" v-if="item.type=='4'">{{item.content}}</span>
                                                <div class="desc">
                                                    <div class="dtxt" v-if="item.type=='6'||item.type=='4'||item.type=='5'">{{ item.intervalTimeStr }}</div>
                                                    <div class="dtxt" v-else v-html="item.content"></div>
                                                    <!-- <span class="tnp-stime">{{item.intervalTimeStr}}</span> -->
                                                </div>
                                            </div>
                                            <a class="cover-box" v-if="(item.type==6||item.type==5)&&item.article" :href="infoUrlEnum[item.article.topCategory.id].url+item.article.id" @click.prevent="()=>{return false;}" @click.stop="toDetail(item.article)">
                                                <img loading="lazy" v-imgd="{ id: item.article.id, w: 100, uptime: item.article.createTime }" v-if="item.article">
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="tnp-footer flx-center">
                            <a class="a-view-all" @click="visibleTrend = true;">查看所有动态</a>
                        </div>
                    </template>
                </div>
            </div>
        </a>

        <a-modal v-model="visible" destroyOnClose centered :footer="null" :closable="false" width="860px" wrapClassName="private-letter-win-modal">
            <Notice ref="refNotice" @close="visible = false" :privatemember="privatemember"/>
        </a-modal>
        <a-modal v-model="visibleTrend" destroyOnClose centered :footer="null" :closable="false" width="860px">
            <Trends ref="refTrends" @close="visibleTrend = false" />
        </a-modal>
    </div>
</template>

<script>
import api from '@/api/api'
import Trends from '@/components/Trends'
import Notice from '@/components/Notice'
export default {
    components: { Notice, Trends },
    data() {
        return {
            infoUrlEnum: {
                22: { url: '/game/', name: '游戏' },
                1: { url: '/work/', name: '作品' },
                50: { url: '/video/', name: '短视频' },
                9: { url: '/article/', name: '文章' }
            },
            defaultAvatar:require('@/assets/pro/default_sys_img.svg'),
            defaultUserAvatar:require('@/assets/pro/default_sys_img.svg'),
            all:0,
            privatemember:{},
            totalPage:0,
            hasMore:true,
            scrollLoaded:false,
            list:[],
            tnpTab:1,
            visible:false,
            visibleTrend:false,
            params:{
                isAsc:'desc',
                orderByColumn:'createTime',
                pageNum:1,
                pageSize:10
            }
        }
    },
    async mounted(){
        let res = await api.unreadStatistics({sendStatus:0})
        this.all=res.data.all;
        this.queryList();
    },
    methods:{
        loadError(e){
            e.target.src=this.defaultUserAvatar;
            e.target.removeAttribute('srcset');
        },
        toDetail(item){
            let routeData=this.$router.resolve({ path: this.infoUrlEnum[item.topCategory.id].url+ item.id})
            window.open(routeData.href, '_blank');
        },
        async handleReadAll(){
            if(this.all==0)return;
            let res=await api.setMsgRead();
            if(res.code==0){
                this.list.map(item=>{
                    item.sendStatus==1;
                })
                this.all=0;
            }
        },
        async toPrivate(item,idx){
            if(item.sendStatus==0)
            {
                let res=await api.setMsgRead(item.id);
                if(res.code==0){
                    item.sendStatus=0;
                    this.all--;
                }
            }
            this.privatemember=item.sendMember;
            this.visible = true;
        },
        async toNoticeCenter(item,idx){
            if(item.sendStatus==0)
            {
                let res=await api.setMsgRead(item.id);
                if(res.code==0){
                    item.sendStatus=0;
                    this.all--;
                }
            }
            this.visibleTrend = true;
        },
        chooseByTab(_tab){
            $('.tnp-panel-con-wrap').scrollTop(0);
            this.tnpTab=_tab;
            this.totalPage=0;
            this.params.pageNum=1;
            this.list=[];
            this.scrollLoaded=false;
            this.queryList();
        },
        onScroll(e){
            let spacNum = e.target.scrollHeight - ($(e.target).scrollTop() + $(e.target).height());
            if(this.scrollLoaded==false)return;
            if (spacNum < 1 && this.totalPage != this.params.pageNum) {
                this.scrollLoaded=false;
                this.params.pageNum++;
                this.queryList();
            }
        },
        async queryList() {
            let that=this;
            let res={};
            let params=Object.assign({},this.params);
            let textRegex = /(?<=>)[^<]+(?=<)/g;
            textRegex=/<[^>]*>|&nbsp;/g;
            if(this.tnpTab==1){
                params.type=26;
                res = await api.noticesList(params);
            }else{
                params.type=25;
                res = await api.noticesList(params);
            }
            res.data.forEach((m) => {
                if (m.type != 0) {
                    m.content = that.$bhelper.replace_em(m.content).replace(textRegex,'').replace('<br/>','');
                }else{
                    m.content=m.content.replace(textRegex,'');
                }
            });
            let rsnum = res.total % this.params.pageSize;
            let totalPage= rsnum == 0 ? res.total / this.params.pageSize : parseInt(res.total / this.params.pageSize + 1);
            // this.hasMore=!(res.data && (res.data.length < this.params.pageSize || this.params.pageNum >= totalPage));
            this.list = [...this.list,...res.data];
            this.totalPage=totalPage;

            setTimeout(()=>{
                that.scrollLoaded=true;
            },1000)
        }
    }
}
</script>

<style lang="less">
.notice {
    background: url('../assets/pro/header/notice_icon.svg') no-repeat;
    background-position:center;
    width:28px;
    height: 47px;
    display: block;
    position: relative;
    .num {
        background: #11CCB1;
        color: #fff;
        font-size: 12px;
        font-weight: normal;
        // height:18px;
        padding: 0px 5px;
        line-height: 18px;
        border-radius: 18px;
        position: relative;
        top: 0px;
        // min-width:18px;
        line-height:17px;
        text-align: center;
        display: inline-block;
        right: -15px;
    }

    .tip-notice-panel {
        position: absolute;
        width: 400px;
        height: 417px;
        right: 0px;
        top: 28px;
        // top:36px;
        padding-top:19px;
        display: none;
        animation: hdpanel .3s ease forwards;
        .tnp-wrap {
            background: #23232A;
            border-radius: 16px;
            padding: 18px 0px 0px 0px;
            cursor: default;
            box-shadow: 0px 0px 12px 3px rgba(0, 0, 0, 0.3);

            .tnp-tab {
                font-size: 16px;
                color: #969696;
                padding-left:30px;
                // margin-bottom:24px;
                a {
                    position: relative;

                    &:first-child {
                        margin-right: 30px;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                    }

                    &.active {
                        color: #fff;
                        font-weight: 500;

                        &:after {
                            width: 24px;
                            height: 2px;
                            background: #fff;
                            left: 15%;
                            border-radius: 2px;
                            bottom: -5px;
                        }
                    }
                }
            }

            .tnp-panel-con-wrap {
                min-height: 300px;
                max-height: 300px;
                overflow-y: auto;
                overflow-x: hidden;
                padding-right:30px;
                margin-top:24px;
                padding-left:30px;
            }

            .tnp-panel-con {
                // padding-bottom: 20px;
                // padding-right: 20px;
                display: flex;
                flex-direction: column;
                grid-gap:14px;
                padding-bottom:14px;
                li {
                    // margin-top: 14px;
                    // display:flex;
                    // align-items: center;
                    // justify-content: space-between;
                    cursor: pointer;
                    &:not(.active):hover{
                        .tnp-con-lt{
                            .title-basic{
                                *{
                                    color:#fff !important;
                                }
                            }
                        }
                    }
                    .tnp-con-lt {
                        display: flex;
                        align-items: center;
                        width: 100%;

                        .img-avatar {
                            width: 32px;
                            height: 32px;
                            object-fit: cover;
                            border-radius: 32px;
                            margin-right: 15px;
                        }

                        .title-basic {
                            width:calc(100% - 50px);
                            display: flex;
                            flex-direction: column;
                            .name {
                                line-height: 20px;
                                color: #969696;
                                font-weight: 500;
                                font-size: 14px;
                            }

                            .desc {
                                line-height: 20px;
                                color: #969696;
                                font-size: 12px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                                margin-top:5px;
                                max-height:20px;
                                overflow: hidden;
                                .dtxt {
                                    max-width: 80%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    img{
                                        width:20px;
                                        margin:0px 3px;
                                    }
                                }
                            }
                        }
                        .right-wrap{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            width:calc(100% - 32px - 15px);
                            .cover-box{
                                min-width:50px;
                                max-width:50px;
                                height:50px;
                                background:#34323A;
                                border-radius:8px;
                                overflow: hidden;
                                img{
                                    width:100%;
                                    height:100%;
                                    object-fit: cover;
                                }
                                &:hover{
                                    img{
                                        transform: scale(1.08);
                                    }
                                }
                            }
                        }
                    }

                    .tnp-stime {
                        font-size: 12px;
                        color: #969696;
                    }
                    &.active{
                        .title-basic{
                            .name,.dtxt,.tnp-stime{
                                color: #fff;
                            }
                        }
                    }
                }
            }

            .tnp-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-top: 1px solid #2C2C2D;
                line-height: 49px;
                font-size: 14px;
                color: #969696;
                padding-right:30px;
                padding-left:30px;
                a:hover {
                    text-decoration: underline;
                }


                .a-view-all {
                    background: url('../assets/pro/m_arrow.svg') no-repeat;
                    background-position: right center;
                    padding-right: 20px;
                }

                &.flx-center {
                    justify-content: center;
                }
            }
        }
    }

    &:hover {
        .tip-notice-panel {
            display: inherit;
        }
    }
}
</style>